<template>
  <div class="account2 df">
    <div id="container1" class="container1">1111</div>
    <div class="container2" id="container2">右侧饼图</div>
  </div>
</template>

<script>
import Highcharts from "highcharts";
import variablepie from "highcharts/modules/variable-pie";
variablepie(Highcharts);
export default {
  data() {
    return {};
  },
  methods: {
    // 左侧饼图
    getInfo() {
      Highcharts.chart("container1", {
        credits: {
          enabled: false, // 禁用版权信息
        },
        chart: {
          type: "variablepie",
        },
        title: {
          text: "不同国家人口密度及面积对比",
        },
        subtitle: {
          text: "扇区长度（圆周方法）表示面积，宽度（纵向）表示人口密度",
        },
        tooltip: {
          headerFormat: "",
          pointFormat:
            '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
            "面积 (平方千米): <b>{point.y}</b><br/>" +
            "人口密度 (每平方千米人数): <b>{point.z}</b><br/>",
        },
        series: [
          {
            minPointSize: 10,
            innerSize: "20%",
            zMin: 0,
            name: "countries",
            data: [
              {
                name: "西班牙",
                y: 505370,
                z: 92.9,
              },
              {
                name: "法国",
                y: 551500,
                z: 118.7,
              },
              {
                name: "波兰",
                y: 312685,
                z: 124.6,
              },
              {
                name: "捷克共和国",
                y: 78867,
                z: 137.5,
              },
              {
                name: "意大利",
                y: 301340,
                z: 201.8,
              },
              {
                name: "瑞士",
                y: 41277,
                z: 214.5,
              },
              {
                name: "德国",
                y: 357022,
                z: 235.6,
              },
            ],
          },
        ],
      });
    },
    // 右侧饼图
    getInfo1() {
      Highcharts.getOptions().colors = Highcharts.map(
        Highcharts.getOptions().colors,
        function (color) {
          return {
            radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
            stops: [
              [0, color],
              [1, Highcharts.Color(color).brighten(-0.3).get("rgb")], // darken
            ],
          };
        }
      );
      // 构建图表
      var chart = Highcharts.chart("container2", {
        credits: {
          enabled: false, // 禁用版权信息
        },
        title: {
          text: "2014年某网站各浏览器的访问量占比",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                color:
                  (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                  "black",
              },
              connectorColor: "silver",
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "浏览器占比",
            data: [
              ["Firefox", 45.0],
              ["IE", 26.8],
              {
                name: "Chrome",
                y: 12.8,
                sliced: true,
                selected: true,
              },
              ["Safari", 8.5],
              ["Opera", 6.2],
              ["其他", 0.7],
            ],
          },
        ],
      });
    },
  },
  mounted() {
    this.getInfo();
    this.getInfo1();
  },
};
</script>

<style lang="scss" scoped>
.account2 {
  width: 100%;
  flex: 1;
  // background-color: rgb(7, 181, 234);
  margin-bottom: 10px;
  .container1 {
    flex: 1;
    // background-color: rgb(20, 219, 206);
  }
  .container2 {
    flex: 1;
    // background-color: rgb(220, 19, 146);
  }
}
</style>